<template>
    <div>
      <div>
        <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline"> -->
          <!-- <el-form-item label="VIN：" style="width: 400px;">
            <el-input v-model="form.vin" placeholder="请输入车辆VIN"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询历史轨迹</el-button>
          </el-form-item>
        </el-form> -->
      </div>
      <div id="container"></div>
      <div class="input-card" v-show="true">
        <div class="input-item">
          <button
            type="primary"
            size="small"
            style="width: 90px"
            @click="startAnimation"
          >
            开始动画
          </button>
        </div>
        <div class="input-item">
          <button
            type="primary"
            size="small"
            style="width: 90px"
            @click="pauseAnimation"
          >
            暂停动画
          </button>
        </div>
        <div class="input-item">
          <button
            type="primary"
            size="small"
            style="width: 90px"
            @click="resumeAnimation"
          >
            继续动画
          </button>
        </div>
      </div>
    </div>
  </template>
  
  <script>

  import AMapLoader from "@amap/amap-jsapi-loader";
  // 设置安全密钥
  window._AMapSecurityConfig = {
    securityJsCode: "09a6d09008395dd82d7e9bd783ef0479",
  };
  export default {
    name: "TrackContainer",
    //import 引入的组件需要注入到对象中才能使用
    components: {},
    props: {
      visible: Boolean,
    },
    data() {
      //这里存放数据
      return {
        form:{
          vin:"H32132139",
        },
        AMap: null,
        //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
        map: null,
        mouseTool: null,
        marker: null,
        lineArr: [],
      };
    },
    //计算属性 类似于 data 概念
    computed: {},
    //监控 data 中的数据变化
    watch: {},
    mounted(){
      this.startAnimation();
    },
    //方法集合
    methods: {
      pauseAnimation() {
        this.marker.pauseMove();
      },
      resumeAnimation() {
        this.marker.resumeMove();
      },
      startAnimation() {
        this.marker.moveAlong(this.lineArr, {
          // 每一段的时长
          duration: 500, //可根据实际采集时间间隔设置
          // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
          autoRotation: true,
        });
      },
      initMap() {
        AMapLoader.reset();
        AMapLoader.load({
          key: "a13f2a0c15e7fc108af3a866c14ee5d8", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [
            "AMap.Scale",
            "AMap.HawkEye",
            "AMap.ToolBar",
            "AMap.AutoComplete",
            "AMap.PlaceSearch",
            "AMap.ControlBar",
            "AMap.MouseTool",
            "AMap.DragRoute",
            "AMap.MoveAnimation",
          ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
          .then((AMap) => {
            this.AMap = AMap;
            this.marker = null;
            // 行驶的路径
            this.lineArr = [
              [116.940248, 39.174546],
              [116.940553, 39.174594],
              [116.941363, 39.174578],
              [116.941703, 39.174562],
              [116.941886, 39.174562],
              [116.942008, 39.174577],
              [116.942273, 39.17453],
              [116.942497, 39.17453],
              [116.942761, 39.174499],
              [116.942965, 39.174435],
              [116.943148, 39.174388],
              [116.943393, 39.174309],
              [116.943535, 39.17423],
              [116.943739, 39.174199],
              [116.944106, 39.174041],
              [116.944453, 39.17393],
              [116.944718, 39.173883],
              [116.944901, 39.173804],
              [116.945105, 39.173693],
              [116.945247, 39.173615],
              [116.945471, 39.173551],
              [116.945614, 39.173488],
              [116.945878, 39.173409],
              [116.94629, 39.173267],
              [116.946648, 39.173105],
              [116.946892, 39.173026],
              [116.946872, 39.172773],
              [116.946831, 39.172584],
              [116.946831, 39.172347],
              [116.947013, 39.172289],
              [116.947155, 39.172195],
              [116.947277, 39.172163],
              [116.947481, 39.172068],
              [116.94744, 39.172005],
              [116.947379, 39.171879],
              [116.947277, 39.171831],
              [116.947196, 39.171689],
              [116.947114, 39.171595],
              [116.946972, 39.1715],
              [116.946972, 39.171389],
            ];
            this.map = new AMap.Map("container", {
              //设置地图容器id
              viewMode: "2D", //  是否为3D地图模式
              zoom: 13, // 初始化地图级别
              // 中心点
              center: [116.940248, 39.174546], //中心点坐标  成都 104.065735, 30.659462
              resizeEnable: true,
            });
  
            this.marker = new AMap.Marker({
              map: this.map,
              // 小车的初始位置
              position: [116.940248, 39.174546],
              icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
              offset: new AMap.Pixel(-13, -26),
            });
  
            // 绘制轨迹
            var polyline = new AMap.Polyline({
              map: this.map,
              path: this.lineArr,
              showDir: true,
              strokeColor: "#28F", //线颜色
              // strokeOpacity: 1,     //线透明度
              strokeWeight: 6, //线宽
              // strokeStyle: "solid"  //线样式
            });
  
            var passedPolyline = new AMap.Polyline({
              map: this.map,
              strokeColor: "#AF5", //线颜色
              strokeWeight: 6, //线宽
            });
  
            this.marker.on(
              "moving",
              function (e) {
                passedPolyline.setPath(e.passedPath);
                this.map.setCenter(e.target.getPosition(), true);
              }.bind(this)
            );
  
            this.map.setFitView();
          })
          .catch((e) => {
            console.log(e);
          });
      },
    },
    //生命周期 - 创建完成（可以访问当前 this 实例）
    created() {},
    //生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() {
      this.initMap();
    },
    //生命周期 - 创建之前
    beforeCreate() {},
    //生命周期 - 挂载之前
    beforeMount() {},
    //生命周期 - 更新之前
    beforeUpdate() {},
    //生命周期 - 更新之后
    updated() {},
    //生命周期 - 销毁之前
    beforeDestroy() {},
    //生命周期 - 销毁完成
    destroyed() {},
    //如果页面有 keep-alive 缓存功能， 这个函数会触发
    activated() {},
  };
  </script>
  
  <style scoped>
  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 800px;
  }
  .input-item {
    height: 2.2rem;
  }
  
  .input-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: 0.25rem;
    width: 10rem;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
    position: fixed;
    bottom: 12rem;
    right: 2rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
  }
  </style>
  